<template>

        <van-button
              v-if="is_follow"
              class="follow-btn"
              round
              size="small"
              @click="onFollow"
              :loading="loading"
        >已关注</van-button>
        <van-button
              v-else
              class="follow-btn"
              type="info"
              color="#3296fa"
              round
              size="small"
              icon="plus"
              @click="onFollow"
              :loading="loading"
        >关注</van-button>

</template>

<script>
import {addFollow,delFollow} from '@/api/user'
export default {
    name:'followUser',
    //自定义v-model的数据名称
    model:{
            prop:'is_follow', //默认是value
            event:'update_isFollow' //默认是input
        },
    props:{
        is_follow:{
            type:Boolean,
            required:true
        },
        user_id:{
            type:[Number,String,Object],
            required: true
        }
    },
    data() {
        return {
            loading: false
        }
    },
    components:{},
    methods:{
        async onFollow(){
            this.followLoading = true //展示关注按钮的loading状态
            try{
                if(this.is_follow){
                    //已关注，点击取消关注
                   await delFollow(this.user_id)
                //    this.article.is_followed = false
                }else{
                    //未关注，点击关注
                    await addFollow(this.user_id)
                    // this.article.is_followed = true
                }
                //更新视图状态
                // this.is_followed = !this.is_followed
                // this.$emit('update_is_followed',!this.is_follow)
                // this.$emit('input',!this.value)
                this.$emit('update_isFollow',!this.is_follow)
            }catch(err){
                let message='操作失败，稍后重试'
                if(err.response && err.response.status === 400){
                    message='用户不能关注自己'
                }
                this.$toast(message)
            }
            this.followLoading = false //关闭按钮的loading
        }
    }
}
</script>

<style>

</style>